
<template>
  <validator name="newQuestionForm">
    <form role="form"  class="col-md-8 col-md-offset-2 form-margin question-form">
      <div class="form-group">
        <label>请牢记您的密保问题</label>
        <select class="form-control" v-model="state.newQuestionList[0]" initial="off" detect-change="off" v-validate:first-q="['required']">
          <option v-for="question in getQuestionList(0)" v-bind:value="question">
            {{ question.questionContent }}
          </option>
        </select>
        <div>
          <error-template v-show="$newQuestionForm.firstQ.required">{{$newQuestionForm.firstQ.required}}</error-template>
        </div>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:first-a="['required']" v-model="state.answerList[0]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$newQuestionForm.firstA.required">{{$newQuestionForm.firstA.required}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <select class="form-control" v-model="state.newQuestionList[1]" initial="off" detect-change="off" v-validate:second-q="['required']">
          <option v-for="question in getQuestionList(1)" v-bind:value="question">
            {{ question.questionContent }}
          </option>
        </select>
        <div>
          <error-template v-show="$newQuestionForm.secondQ.required">{{$newQuestionForm.secondQ.required}}</error-template>
        </div>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:second-a="['required']" v-model="state.answerList[1]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$newQuestionForm.secondA.required">{{$newQuestionForm.secondA.required}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <select class="form-control" v-model="state.newQuestionList[2]" initial="off" detect-change="off" v-validate:third-q="['required']">
          <option v-for="question in getQuestionList(2)" v-bind:value="question">
            {{ question.questionContent }}
          </option>
        </select>
        <div>
          <error-template v-show="$newQuestionForm.thirdQ.required">{{$newQuestionForm.thirdQ.required}}</error-template>
        </div>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:third-a="['required']" v-model="state.answerList[2]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$newQuestionForm.thirdA.required">{{$newQuestionForm.thirdA.required}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <select class="form-control" v-model="state.newQuestionList[3]" initial="off" detect-change="off" v-validate:fourth-q="['required']" >
          <option v-for="question in getQuestionList(3)" v-bind:value="question">
            {{ question.questionContent }}
          </option>
        </select>
        <div>
          <error-template v-show="$newQuestionForm.fourthQ.required">{{$newQuestionForm.fourthQ.required}}</error-template>
        </div>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:fourth-a="['required']" v-model="state.answerList[3]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$newQuestionForm.fourthA.required">{{$newQuestionForm.fourthA.required}}</error-template>
        </div>
      </div>
      <button class="btn btn-primary pull-right" v-on:click.prevent="nexStep" >下一步</button>
    </form>
  </validator>
</template>
<script>
/**
 * @author guocailee
 */

export default {
  name: 'newQuestion',
  props: {
    state: {
      required: true,
      type: Object
    }
  },
  data: () => {
    return {}
  },
  vuex: {
    getters: {
      questionList: ({ security }) => security.questionList
    }
  },
  methods: {
    getQuestionList(number) {
      var self = this
      let result = this.questionList.filter((v) => {
        let flag = true
        self.state.newQuestionList.forEach((t, i) => {
          if (i !== number && t && t.questionId === v.questionId) {
            flag = false
          }
        })
        return flag
      })
      return result
    },
    nexStep() {
      let self = this
      self.$validate(true, () => {
        if (self.$newQuestionForm.invalid) {
          return
        }
        this.$dispatch('nexStep')
      })
    }
  }
}
</script>